<template>
  <div class="goods-detail">
    <div class="goods-info">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="goodsInfo.subject == 1" :to="{ path: '/?type=2' }"
          >科目二</el-breadcrumb-item>
          <el-breadcrumb-item  v-if="goodsInfo.subject == 2" :to="{ path: '/?type=3' }"
          >科目三</el-breadcrumb-item>
        <el-breadcrumb-item>{{ courseInfo.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="goods-details">
        <div class="goods-img">
          <img :src="courseInfo.full_cover" alt="" />
        </div>
        <div class="goods">
          <div class="goods-title">{{ courseInfo.title }}</div>
          <div class="goods-time">{{ courseInfo.class }}课时</div>
          <div class="goods-price">￥{{ courseInfo.price }}</div>
          <div><el-button @click="goBuy(courseInfo.id)">立即购买</el-button></div>
        </div>
      </div>
    </div>
    <div class="course-list">
      <div class="list-box">
        <div class="list-title"><span>视频内容</span></div>
        <div class="video-list">
          <div
            class="video-item"
            v-for="item in courseInfo.videos"
            :key="item.id"
            @click="playVideo(courseInfo.id)"
          >
            <div>
              <img src="@/assets/play.png" alt="" />
              <span>{{ item.title }}</span>
            </div>
            <div>
              <img src="@/assets/lock.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getvideoDetails } from '@/api/index.js'
import { createOrderDY } from '@/api/pay.js'
export default {
  name: "SubTwoDetail",
  data() {
    return {
      dialogTableVisible: false,
      goodsInfo: {},
      courseInfo:{},
      courseList: [
        {
          id: 1,
          name: "科二考试技巧1",
        },
        {
          id: 2,
          name: "科二考试技巧2",
        },
        {
          id: 3,
          name: "科二考试技巧3",
        },
        {
          id: 4,
          name: "科二考试技巧4",
        },
      ],
    };
  },
  created() {
    this.goodsInfo = this.$route.query.item;
    this.init(this.goodsInfo.id)
  },
  methods: {
    // 初始化
    init(id) {
      let that = this
      getvideoDetails(id).then(res=>{
        // console.log(566,res)
        that.courseInfo = res.data
      })
    },
    // 购买
    goBuy(id){
      this.$router.push({
        path:'/ConfirmOrder',
        query:{id}
      })
    },
    // createOrder(id){
    //   let that = this
    //   createOrderDY({video_course_id:id}).then(res=>{
    //     console.log(888,res)
    //     // that.$message({
    //     //     type: "success",
    //     //     message: "购买课程!",
    //     //   });
    //   })
    // },
    // 弹窗
    playVideo(id) {
      let that = this
      this.$confirm("请先购买课程，才可以播放", "", {
        confirmButtonText: "购买课程",
        cancelButtonText: "暂不购买",
        cancelButtonClass:'cancelButton',
        confirmButtonClass:'confirmButton',
        center: true,
      })
        .then(() => {
          // that.createOrder(id)
          that.goBuy(id)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "暂不购买",
          });
        });
    },
  },
};
</script>

<style lang="scss">

.confirmButton{
  background-color: #fff !important;
  color: #2ac092 !important;
}
.cancelButton{
  background-color: #fff !important;
  color: #666666 !important;
}
.goods-detail {
  background-color: #f5f5f5;
  height: 89.3vh;

  .goods-info {
    padding: 1.5% 12.5%;
    background-color: #fff;

    .goods-details {
      display: flex;
      margin-top: 4vh;

      .goods-img {
        width: 17.2vw;
        height: 23.3vh;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 1.6vw;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .goods {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 75%;

        .goods-title {
          font-size: 1vw;
          font-weight: bold;
        }

        .goods-time {
          font-size: 0.8vw;
          color: #999999;
        }

        .goods-price {
          font-size: 0.9vw;
          background: #f5f5f5;
          color: #ff6d6a;
          font-weight: bold;
          padding: 1% 0.5%;
        }
      }
    }
  }
}
.el-button {
  background: #2ac092;
  color: #fff;
}

.course-list {
  margin-top: 4vh;
  padding: 0 12.5%;

  .list-box {
    background-color: #fff;
    border-radius: 10px;

    .list-title {
      font-size: 1vw;
      padding: 3vh 2vw;

      > span {
        width: max-content;
        padding: 1.3vh 0;
        border-bottom: 2px solid #2ac092;
      }
    }

    .video-list {
      width: 95%;
      margin: 0 auto;
      border-top: 2px solid #e6e6e6;

      .video-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5% 0;
        width: 98%;
        margin: 0 auto;
        border-bottom: 1px solid #e6e6e6;
        cursor: pointer;
        font-size: 1vw;
        color: #333333;
        user-select: none;

        > div:nth-child(1) {
          display: flex;
          align-items: center;

          > img {
            margin-right: 0.2vw;
          }
        }
      }

      .video-item:hover {
        color: #2ac092;
      }
    }
  }
}
</style>